import React, { Component } from 'react';

class Index extends Component {
  state = {
    textValue: '',
    textAreaValue: '',
    selectValue: '001',
    checkedValue: true,
    checkedBoxesValue: {
      'football': false,
      'basketball': false,
      'baseball': false
    }
  }

  handleTextChange = (e) => {
    this.setState({
      textValue: e.target.value
    })
  }

  handleTextAreaChange = (e) => {
    this.setState({
      textAreaValue: e.target.value
    })
  }

  handleSelectChange = (e) => {
    this.setState({
      selectValue: e.target.value
    })
  }

  handleCheckboxChange = (e) => {
    this.setState({
      checkedValue: e.target.checked
    })
  }

  handleCheckedBoxChange = (e) => {
    const checked = e.target.checked
    const name = e.target.name
    this.state.checkedBoxesValue[name] = checked
    this.setState({})
  }

  render() {
    return (
      <>
        <div>
          <input 
            type="text"
            value={this.state.textValue}
            onChange={this.handleTextChange}
          />
          {this.state.textValue}
        </div>

        <div>
          <textarea cols="30" rows="10"
            value={this.state.textAreaValue}
            onChange={this.handleTextAreaChange}
          ></textarea>
          {this.state.textAreaValue}
        </div>

        <div>
          <select
            value={this.state.selectValue}
            onChange={this.handleSelectChange}
          >
            <option value="001">北京</option>
            <option value="002">上海</option>
            <option value="003">深圳</option>
          </select>
          {this.state.selectValue}
        </div>

        <div>
          <input 
            type="checkbox"
            checked={this.state.checkedValue}
            onChange={this.handleCheckboxChange}
          />
          {JSON.stringify(this.state.checkedValue)}
        </div>

        <div>
          <input type="checkbox"
            name="football"
            checked={this.state.checkedBoxesValue['football']}
            onChange={this.handleCheckedBoxChange}
          />
          <input type="checkbox"
            name="basketball"
            checked={this.state.checkedBoxesValue['basketball']}
            onChange={this.handleCheckedBoxChange}
          />
          <input type="checkbox"
            name="baseball"
            checked={this.state.checkedBoxesValue['baseball']}
            onChange={this.handleCheckedBoxChange}
          />
          {JSON.stringify(this.state.checkedBoxesValue)}
        </div>
      </>
    );
  }
}

export default Index;